<template>
    <van-search v-model="keyword" @search="search" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeImgs">
            <img :src="item.url" class="img" /></van-swipe-item>
    </van-swipe>
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
    <van-grid :column-num="4" icon-size="35">
        <van-grid-item v-for=" item in hotCategory" :key="item.name" :icon="item.img" :to="'/category?id=' + item.id"
            :text="item.name" />
    </van-grid>
    <van-cell title="热卖商品" icon="hot-o" is-link />
    <!-- <div class="line"></div>
    <div class="product-container">
        <div class="container" id="con">
            <div class="item" v-for="item in hotProduct" :key="item.id">
                <img :src="item.img" :alt="item.name">
                <span class="name">{{ item.name }}</span>
                <div class="price-int">¥<span class="price">{{ item.price }}</span>.00</div>
             
            </div>
        </div>
    </div> -->


    <div class="pro-list">
        <ul class="left-list">
            <template v-for="item in hotProduct">
                <a :href="'/category?id=' + item.id">
                    <div class="normal-pro">
                        <img class="pro-img" :src="item.img">
                        <span class="name">{{ item.name }}</span>
                        <div class="price-int">¥<span class="price">{{ item.price }}</span>.00</div>
                        <!-- <span class="price">¥ {{item.price}}</span> -->
                    </div>
                </a>
            </template>
        </ul>
        <ul class="right-list">
            <div class="normal-pro" v-for="item in hotProduct">
                <img class="pro-img" :src="item.img">
                <span class="name">{{ item.name }}</span>
                <div class="price-int">¥<span class="price">{{ item.price }}</span>.00</div>
            </div>
        </ul>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const keyword = ref('');
const hotProduct = ref([
    { name: "伊宠纯种英短蓝白猫幼崽幼猫小猫宠物猫咪活体 宠物级", id: 10, price: 1683, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/65875/10/21823/123664/62f1d383Ef1e3e3fb/083854bc7e7c3ba4.jpg!q70.dpg.webp" },
    { name: "爱猫商城", id: 11, price: 1169, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/65875/10/21823/123664/62f1d383Ef1e3e3fb/083854bc7e7c3ba4.jpg!q70.dpg.webp" },
    { name: "爱猫商城", id: 12, price: 1683, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/65875/10/21823/123664/62f1d383Ef1e3e3fb/083854bc7e7c3ba4.jpg!q70.dpg.webp" },
    { name: "爱猫商城", id: 12, price: 1683, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/65875/10/21823/123664/62f1d383Ef1e3e3fb/083854bc7e7c3ba4.jpg!q70.dpg.webp" },
    { name: "爱猫商城", id: 12, price: 1683, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/65875/10/21823/123664/62f1d383Ef1e3e3fb/083854bc7e7c3ba4.jpg!q70.dpg.webp" },
    { name: "爱猫商城", id: 12, price: 1683, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/65875/10/21823/123664/62f1d383Ef1e3e3fb/083854bc7e7c3ba4.jpg!q70.dpg.webp" }
])
const swipeImgs = ref([
    { url: "https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000267/100043127341/FocusFullshop/CkJqZnMvdDEvODcwNzAvOS80NDgyOS80NjgzODUvNjUwYzlmNGZGOTRlMzJjNWQvNjRkN2JkZGY5M2YzOGUyNi5wbmcSCzcwMS1qal8wXzU0MAI4i4t6QhYKEue7veWutua0l-iho-WHneePoBABQhYKEueyvuW9qeS4jeWuuemUmei_hxACQhAKDOeri-WNs-aKoui0rRAGQgcKA-aKohAHWK30o9j0Ag/cr_1125x449_0_166/s/q70.jpg" },
    { url: "https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/87008/2/42092/104180/649d2f96F76391fc0/a89f91d9d639ce73.jpg!cr_1053x420_4_0!q70.jpg" },
    { url: "https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000269/100006061653/FocusFullshop/CkNqZnMvdDEvODQ3MzIvMTAvMzkwOTEvNDE0MzY4LzY1MGM5NmY3RjMxOGJhNjJkL2E5ZDVmZjdhZjJlMjE0NjUucG5nEgs0NjItampfMF8yMDACOI2LekIdChnlhbDolLvnnLzpnJwv55y86YOo57K-5Y2OEAFCFgoS57K-5b2p5LiN5a656ZSZ6L-HEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG6LaF5YC8EAdY1czNxvQC/cr_1125x449_0_166/s/q70.jpg" },
    { url: "https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000268/100023984979/FocusFullshop/CkJqZnMvdDEvNTEwODAvNDAvMTg1MDQvNTY3MDYvNjJiYmIzYzRFYTJlMTczNTkvMmI0MTg4MzI0ZTI3ZjM4ZS5qcGcSDDk5OS1jX3R5XzBfMTADOIyLeljTxpPP9AI/cr_1125x449_0_166/s/q70.jpg" }
])
const hotCategory = ref([
    { name: "爱猫商城", id: 10, img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", id: 11, img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", id: 12, img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
    { name: "爱猫商城", img: "https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" },
])
onMounted(() => {

})
const search = (keyword: string) => {
    console.log(keyword);

}
</script>
<style>
.van-icon__image {
    border-radius: 5px;
}
</style>
<style scoped>
.img {

    width: 100%;
}

.line {
    height: 5px;
}

.name {
    text-align: left;
    line-height: 1.05rem;
    /* height: 2.1rem; */
    font-size: 0.7rem;
    /* font-family: -apple-system, Helvetica, sans-serif; */
    overflow: hidden;
    color: #434343;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all;
    -webkit-box-orient: vertical;
}

.price-int {
    font-style: normal;
    font-family: JDZH-Regular, sans-serif;
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1.5rem;
    color: #ff4142;
}

.price {
    font-size: 1rem;
    font-style: normal;
}
.pro-list {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    margin-left: 10px;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 
.pro-list ul {
    width: 41vw;
}

.normal-pro {
    height: 14.84rem;
    padding: 0 0 0.28rem 0;
    position: relative;
    box-sizing: border-box;
    width: 10.84rem;
    overflow: hidden;
    border-radius: 0.24rem;
    margin-bottom: 0.36rem;
    background-color: #FFF;
}
.normal-pro .pro-img {
    width: 10.84rem;
    height: 10.84rem;
}

/* .container {
    min-height: 900px;
    column-count: 2;
    column-gap: 0;
}

.item {
    margin: 10px;
}

.item img {
    width: 100%;
}

.item[data-v-2dc54a20] {
    margin-top: 0px;
} */
</style>